<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: none;
            list-style: none;
        }
        .box{
            width:100%;
            height: 340px;
            position: relative;

        }
        .box ul{
            position: relative;
            width:500%;
            height: 340px;

        }
        .box ul li{
            float: left;
            width:20%;
            height:100%;
            z-index: 1;
        }
        li img{
            width:100%;
            height:100%;
        }
        p{
            position: absolute;
            width:880px;
            top:50%;
            margin-top: -100px;
            left:50%;
            margin-left:-470px;
            z-index: 2;

        }
        span{
            width: 50px;
            height: 50px;
            font-size:180px;
            float: left;
            color: white;
        }
        span:nth-of-type(2){
            float: right;
        }
    </style>

</head>
<body>
<div class="box">
    <p><span>&lt;</span> <span>&gt;</span></p>
    <ul>
        <li><img src="images/1.jpeg" alt=""></li>
        <li><img src="images/2.jpeg" alt=""></li>
        <li><img src="images/3.jpeg" alt=""></li>
        <li><img src="images/4.jpeg" alt=""></li>
    </ul>
</div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    $(function(){
        //克隆节点
        var li = $('li:first').clone(true);
        //添加节点
        $('ul').append(li);
        //获取li的长度
        var liLength = $('li').length;
        //1.0 记录即将动的图片的位置
        var index = 0;
        //点击右键让图片动起来
        $('span:last').click(function(){
            index++;
            if(index > liLength-1 ){
                index = 1;
                //让ul马上回到原始位置
                $('ul').css({left:0})
            }
            //让图片滚动起来
            $('ul').animate({left:-index*100+'%'})
        })
        //点击左键让图片动起来
        $('span:first').click(function(){
            index--;
            if(index<0){
                index = liLength - 2;
                //让ul马上回到原始的位置
                $('ul').css({left:-(liLength-1)*100+'%'})//重点理解
            }
            //让图片动起来
            $('ul').animate({left:-index*100+'%'})

        })

    })
</script>
</html>